<template>
    <div>
<!--        轮播图-->
        <div class="block">
            <el-carousel height="600px"  interval="4000" style="text-align: center">
                <el-carousel-item v-for="(item,index) in image" :key="index" >
                    <img :src="item" style="height:100%;width: 100%;"/>
                </el-carousel-item>
            </el-carousel>
        </div>
<!--        导航-->
        <div>
            <el-radio-group v-model="isBlog" style="margin-bottom: 20px;">
                <el-radio-button :label="true">博客</el-radio-button>
                <el-radio-button :label="false">资源</el-radio-button>
            </el-radio-group>
        </div>
<!--        //Blog-->
        <div v-if="isBlog" class="Blog">
<!--            //遍历展示-->
            <div v-for="item in BlogData" class="div_for">
                <div>
                    <h3 style="height: 25px" @click="openBlog(item)">{{ item.title }}</h3>
                </div>
                <div style="height: 150px">
                    <span @click="openBlog(item)">{{ item.content }}......</span>
                </div>
                <div style="margin-bottom:1px ;height: 20px;display: flex">
                    <div style="width: auto;">作者：  {{ item.author}}</div>
                    <div style="margin-left:20px ">
                        <img v-if="isCollect" src="../../assets/已收藏图标.png"  style="width: 20px;height: 20px">
                        <img v-else src="../../assets/未收藏图标.png" @click="collect(item.id)" style="width: 20px;height: 20px">
                        {{ item.peopleNumber }}</div>
                </div>
            </div>
            <!--        分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :currentPage="currentPage"
                    :page-sizes="[5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            />

        </div>
<!--        //resource-->
        <div v-else>
            <div class="Blog">
                <div v-for="item in ResourceData" class="div_for">
                    <div>
                        <h3 style="height: 25px" >{{ item.name }}</h3>
                    </div>
                    <div style="height: 20px">
                        上传者：{{ item.author }}
                    </div>

                    <div>
                        <div v-if="(/\.(jpg|jpeg|png)$/.test(item.content))">
                            <el-image
                                    style="width: 100px; height: 100px"
                                    :src="item.content"
                                    preview-teleported = "true"
                                    :preview-src-list="[item.content]">
                            </el-image>
                        </div>
                        <div v-else >
                            <el-link :href="item.content">点击下载:{{item.content}}</el-link>
                        </div>
                    </div>
                    <div style="margin-bottom:1px ;height: 20px">
                        上传时间：{{ item.createTime }}
                    </div>
            </div>
        </div>
    </div>
<!--        尾页end-->
        <div>

        </div>
        <el-dialog v-model="Vis" title="详情" width="60%">
            <el-card>
                <div v-html="detail.content" style="min-height: 100px"></div>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>
    import request from "../../utils/request";

    export default {
        name: "body",
        data(){
            return{
                currentPage:1,         //记录当前页
                pageSize:10,
                total:0,
                detail:{},
                isBlog: true,
                Vis:false,
                BlogData:[],
                isCollect:false,
                ResourceData:[],
                image:["https://i03piccdn.sogoucdn.com/5dd2b8f2c789fb77",
                    "https://p7.itc.cn/images01/20211111/893c5aa37b084aea930af37aca782dce.png",
                    "http://5b0988e595225.cdn.sohucs.com/images/20191223/8481a36efed142a290c4e1f443048afb.jpeg"
                ]
            }
        },
        created() {
            this.load()
        },
        methods:{
            load(){
                request.get("/index_blog",{
                    params:{
                        pageNum:this.currentPage,
                        pageSize:this.pageSize,
                        search:this.search,
                    }
                }).then(res => {
                    console.log(res)
                    this.BlogData = res.data.records
                    this.total = res.data.total
                })
                request.get("/resourceAuditing",{
                    params:{
                        pageNum:this.currentPage,
                        pageSize:this.pageSize,
                        search : '审核通过',
                    }
                }).then(res => {
                    console.log(res)
                    this.ResourceData = res.data.records
                    this.total = res.data.total
                })

            },
            collect(id) {
                this.$confirm('是否确定收藏课程?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(
                    () => {
                        this.$axios.post("/collect/course",{
                            courseId: id,
                            userId: 1,
                        }).then(res => {
                            if (res && res.status === 200) {
                                this.isCollect = true;
                                this.$message({
                                    type: 'success',
                                    message: '已收藏成功'
                                })
                            }
                        })
                    }
                )
            },
            openBlog(item){
                this.detail = item
                this.Vis = true
            },
            handleSizeChange(pageSize) {//改变当前每页的个数触发
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {//改变当前页码出发
                this.currentPage = pageNum
                this.load()
            }
        },
    }
</script>

<style scoped>
    .block{
        height: 600px;
        width: 100%;
    }
    .Blog{
        display: flex;
        flex-wrap: wrap;
    }
    .div_for {
        height: 200px;
        width: 50%;
        border-left:5px solid #cccccc ;
        border-top:5px solid #cccccc  ;
    }
    .div_for div {
        overflow:hidden
    }
</style>